<script setup lang="ts">
import { computed } from 'vue'
const imgPath = computed(() => {
  const root = import.meta.env.DEV ? '/' : './'
  return `${root}images/apply/shades/`
})
</script>

<template>
  <main class="main-wrap flex-v-cc" v-hl>
    <div class="dev-wrap">
      <div class="pic">
        <img :src="`${imgPath}1.jpg`" />
      </div>
      <div class="pic">
        <img :src="`${imgPath}2.jpg`" />
      </div>
      <div class="pic">
        <img :src="`${imgPath}3.jpg`" />
      </div>
      <div class="pic">
        <img :src="`${imgPath}4.jpg`" />
      </div>
      <div class="pic">
        <img :src="`${imgPath}5.jpg`" />
      </div>
      <div class="pic">
        <img :src="`${imgPath}6.jpg`" />
      </div>
      <div class="pic">
        <img :src="`${imgPath}7.jpg`" />
      </div>
      <div class="pic">
        <img :src="`${imgPath}8.jpg`" />
      </div>
      <div class="pic">
        <img :src="`${imgPath}9.jpg`" />
      </div>
      <div class="pic">
        <img :src="`${imgPath}10.jpg`" />
      </div>
    </div>
  </main>
</template>

<style scoped lang="scss">
.main-wrap {
  @include size(100%, 100%);
  overflow-y: auto;
  background: #f1f9f9;
  .dev-wrap {
    @include size(100%, 100%);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    .pic {
      position: relative;
      flex-shrink: 1;
      flex-grow: 1;
      overflow: hidden;
      transition: 1s;
    }
    .pic:hover {
      flex-shrink: 0;
      flex-grow: 0;
    }
  }
}
</style>
